var ventanaPerfilCliente="";
var checkPasswordPU = true;
var imgPUDefault = 'backend-cacei/public/imagenes/profile/foto1.png';
var check_ok = 'backend-cacei/public/imagenes/check/check_ok.png';
var check_error = 'backend-cacei/public/imagenes/check/check_error.png';
var imgBackground = 'backend-cacei/public/imagenes/background/background_cacei.jpg';
var typeExtension = "imagen";
var imgPUGuardar = 'backend-cacei/public/imagenes/save/4_24x24.png';
var imgPUCancelar = 'backend-cacei/public/imagenes/cancel/1_20x20.png';
var imgTemp = 'backend-cacei/public/tmp/img/';


Ext.define('Estados', {
extend: 'Ext.data.Model',
           fields: [
             {name: 'id', type: 'string'},
             {name: 'nombre', type: 'string'}
           ],
           proxy: {
             type: 'ajax',
             url : 'backend-cacei/index.php/direccion/generarComboEstados/' //id_pais=none
           }
});

//Definicion del Data Store
var estadoStore = Ext.create('Ext.data.Store', {
    model: 'Estados',
    autoLoad: true
});

Ext.define('Paises', {
extend: 'Ext.data.Model',
           fields: [
             {name: 'id', type: 'string'},
             {name: 'nombre', type: 'string'}
           ],
           proxy: {
             type: 'ajax',
             url : 'backend-cacei/index.php/direccion/generarComboPaises'
           }
});

//Definicion del Data Store
var paisStore = Ext.create('Ext.data.Store', {
    model: 'Paises',
    autoLoad: true
});

   
   
//Funcion para validar la extension
function checkFileExtension(elem) {
    var filePath = elem;
    if(filePath.indexOf('.') == -1)
     return false;
              
    var validExtensions = new Array();
    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();

    if (typeExtension=="imagen") {
     validExtensions[0] = 'jpg';
     validExtensions[1] = 'jpeg';
     validExtensions[3] = 'png';
     validExtensions[4] = 'gif'; 
    }
    else {
     validExtensions[0] = 'pdf';
    }   

    for(var i = 0; i < validExtensions.length; i++) {
        if(ext == validExtensions[i])
            return true;
    }

    Ext.Msg.alert('Advertencia', 'La extension .'+ext+' del archivo ' + filePath + ' no es permitida!');
    if (typeExtension=="imagen") {
      document.getElementsByName('ufile[]')[0].value='';
      xt.getCmp('imgFoto').setSrc(imgPUDefault); 
    } 
    return false;
}
   
//Usando html5
function previewImageVPC(input) {
	typeExtension="imagen";
	if (!checkFileExtension(encodeURIComponent(document.getElementsByName("ufileVPC[]")[0].value)))
	{
	 return false;	
	}
	if (input.files && input.files[0]) {
	  var reader = new FileReader();
	  reader.onload = function (e) {
	  	document.getElementById('imgFotoVPC').src = e.target.result;
	  }
	  reader.readAsDataURL(input.files[0]);
	}
}



Ext.define('ventanaPerfilCliente', {
    extend: 'Ext.window.Window',
    height: 351,
    id: 'ventanaPerfilCliente',
    width: 710,
    closeAction: 'hide',
    resizable   : false,
    maximizable : false,
    minimizable : false,
    layout: {
        type: 'border'
    },
    title: 'CACEI: Perfil de Cliente',
    
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    region: 'west',
                    id: 'frmPerfilCliente1',
                    width: 492,
                    layout: {
                        type: 'absolute'
                    },
                    bodyPadding: 10,
                    items: [
                        {
                            xtype: 'textfield',
                            x: 190,
                            y: 50,
                            id: 'txtPUnombre',
                            width: 140,
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Nombre',
                            validateBlank: true
                        },
                        {
                            xtype: 'textfield',
                            x: 330,
                            y: 50,
                            id: 'txtPUapellido',
                            width: 140,
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Apellido',
                            validateBlank: true
                        },
                        {
                            xtype: 'textfield',
                            x: 190,
                            y: 85,
                            id: 'txtPUempresa',
                            width: 280,
                            fieldLabel: 'Trabajo en',
                            labelPad: 0,
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Empresa',
                            validateBlank: true
                        },
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 190,
                            width: 165,
                            id: 'txtPUtelefono',
                            emptyText: 'Telefono'
                        },
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 220,
                            width: 165,
                            id: 'txtPUemail',
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Email',
                            validateBlank: true,
                            vtype: 'email',
                            vtypeText: 'Correo invalido'
                        },
                        {
                            xtype: 'combobox',
                            x: 190,
                            y: 190,
                            width: 150,
                            id: 'cmbPUpais',
                            store: paisStore,
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Pais',
                            validateBlank: true,
                            valueField: 'id',
                            displayField: 'nombre',
                            forceSelection: true,
                            listeners: {
                  				select: function(combo, records, eOpts) {
                  					estadoStore.getProxy().url = 'backend-cacei/index.php/direccion/generarComboEstados/' + Ext.getCmp('cmbPUpais').getValue();
						    		estadoStore.load();
                  				}
                  			}
                        },
                        {
                            xtype: 'combobox',
                            x: 190,
                            y: 220,
                            width: 150,
                            id: 'cmbPUestado',
                            store: estadoStore,
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Estado',
                            validateBlank: true,
                            valueField: 'id',
                            displayField: 'nombre',
                            forceSelection: true
                        },
                        {
                            xtype: 'textfield',
                            x: 190,
                            y: 250,
                            width: 150,
                            id: 'txtPUciudad',
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Ciudad',
                            validateBlank: true
                        },
                        {
                            xtype: 'textareafield',
                            x: 350,
                            y: 190,
                            width: 120,
                            id: 'txtPUdireccion',
                            allowBlank: false,
                            blankText: 'Campo requerido',
                            emptyText: 'Calle/Av.',
                            validateBlank: true
                        },
                        {   
                            id: 'imagenVPC',
                           	border: '',
                            x: 10,
                            y: 150,
         					//atributo accept en algunos navegadores funciona 
          					//para firefox no, accept="image/gif, image/jpeg"
                        	html: '<input type="file" class="x-form-file-input" size="40" name="ufileVPC[]" style="visibility:hidden;position:absolute;top:0;left:0" onchange="previewImageVPC(this)" />'
                        },
                        {
                            xtype: 'image',
                            x: 10,
                            y: 50,
                            border: 1,
                            style: {
                                borderColor: 'gray',
                                borderStyle: 'solid'
                            },
                            height: 100,
                            id: 'imgFotoVPC',
                            width: 130,
                            src: imgPUDefault,
                            title: 'Foto / Logo',
                            listeners: {
                                el: {
                                    click: function() {
                                    	document.getElementsByName('ufileVPC[]')[0].click();
                                    },
                                    mouseover: function(){
                                    	Ext.getElementById('imgFotoVPC').style.cursor = "pointer";
                                    }
                                }
                            }
                        },
                        {
                            xtype: 'label',
                            x: 10,
                            y: 10,
                            text: 'Mis datos'
                        },
                        {
                            xtype: 'label',
                            x: 10,
                            y: 170,
                            width: 150,
                            text: 'Contacto:'
                        },
                        {
                            xtype: 'label',
                            x: 190,
                            y: 170,
                            text: 'Direccion:'
                        }
                    ]
                },
                {
                    xtype: 'form',
                    region: 'center',
                    id: 'frmPerfilCliente2',
                    layout: {
                        type: 'absolute'
                    },
                    collapseMode: 'header',
                    bodyPadding: 10,
                    animCollapse: true,
                    collapsed: true,
                    collapsible: true,
                    title: 'Cambiar Password',
                    items: [
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 50,
                            width: 160,
                            disabled: true,
                            id: 'txtPUusuario'
                        },
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 80,
                            width: 160,
                            id: 'txtPUpassword',
                            inputType: 'password',
                            invalidText: 'Minimo 4 caracteres',
                            emptyText: 'Password actual',
                            minLength: 4,
                            maxLength: 45,
                            minLengthText: 'Minimo 4 caracteres',
                            listeners: {
                            		blur: function(){
                            			validarPasswordActual();
    		                      }
                            }
                        },
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 120,
                            width: 160,
                            id: 'txtPUnewpassword',
                            inputType: 'password',
                            invalidText: 'Minimo 4 caracteres',
                            emptyText: 'Nuevo password',
                            minLength: 4,
                            maxLength: 45,
                            minLengthText: 'Minimo 4 caracteres',
                            listeners: {
  		                      change: function(newValue, oldValue, eOpts){ //Evento que ocurre cuando el txt cambia
  		                      	if (Ext.getCmp('txtPUconfirmar').getValue() != Ext.getCmp('txtPUnewpassword').getValue()){
  		                      		Ext.getCmp('imgCheckErrorVPC').setVisible(true);
  		                      		Ext.getCmp('imgCheckOkVPC').setVisible(false);
  		                      		checkPasswordPU=false;
  		                      	}
  		                      	else{
  		                      		Ext.getCmp('imgCheckOkVPC').setVisible(true);
  		                      		Ext.getCmp('imgCheckErrorVPC').setVisible(false);
  		                      		checkPasswordPU=true;
  		                      	}
  		                      }
  		                    }
                        },
                        {
                            xtype: 'textfield',
                            x: 10,
                            y: 150,
                            width: 160,
                            id: 'txtPUconfirmar',
                            inputType: 'password',
                            invalidText: 'Minimo 4 caracteres',
                            emptyText: 'Confirmar password',
                            minLength: 4,
                            maxLength: 45,
                            minLengthText: 'Minimo 4 caracteres',
                            listeners: {
  		                      change: function(newValue, oldValue, eOpts){ //Evento que ocurre cuando el txt cambia
  		                      	if (Ext.getCmp('txtPUconfirmar').getValue() == "" &&  Ext.getCmp('txtPUnewpassword').getValue() == ""){
  		                      		Ext.getCmp('imgCheckErrorVPC').setVisible(false);
  		                      		Ext.getCmp('imgCheckOkVPC').setVisible(false);
  		                      		checkPasswordPU=true;
  		                      	}
  		                      	else{
  			                      	if (Ext.getCmp('txtPUconfirmar').getValue() != Ext.getCmp('txtPUnewpassword').getValue()){
  			                      		Ext.getCmp('imgCheckErrorVPC').setVisible(true);
  			                      		Ext.getCmp('imgCheckOkVPC').setVisible(false);
  			                      		checkPasswordPU=false;
  			                      	}
  			                      	else{
  			                      		Ext.getCmp('imgCheckOkVPC').setVisible(true);
  			                      		Ext.getCmp('imgCheckErrorVPC').setVisible(false);
  			                      		checkPasswordPU=true;
  			                      	}
  		                      	}
  		                      }
  		                    }
                        },
                        {
                            xtype: 'label',
                            x: 10,
                            y: 30,
                            text: 'Nombre de usuario:'
                        },
                        {
                            xtype: 'image',
                            x: 175,
                            y: 155,
                            border: 0,
                            height: 20,
                            width: 20,
                            id: 'imgCheckOkVPC',
                            src: check_ok,
                            hidden: true
                        },
                        {
                            xtype: 'image',
                            x: 175,
                            y: 155,
                            border: 0,
                            height: 20,
                            width: 20,
                            id: 'imgCheckErrorVPC',
                            src: check_error,
                            hidden: true
                        }
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'button',
                            id: 'btnPUguardar',
                            text: 'guardar',
                            icon: imgPUGuardar,
                            //iconAlign: 'top',
                            scale: 'medium',
                            handler: function(){
								guardarPerfil();
				         	}
                        },
                        {
                            xtype: 'tbseparator'
                        },
                        {
                            xtype: 'button',
                            id: 'btnPUcancelar',
                            text: 'Cancelar',
                            icon: imgPUCancelar,
                            //iconAlign: 'top',
                            scale: 'medium',
                            listeners: {
                                click : function() {
                                 ventanaPerfilCliente.hide();
                                }
                            }
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

function cargarPerfilCliente(){
 
    Ext.Ajax.request({
		url: 'backend-cacei/index.php/cliente/buscarPerfilCliente',
		success: function( resultado, request ) {
	        datos=Ext.JSON.decode(resultado.responseText);
	        if (datos.exito=='true') {
		        Ext.getCmp('txtPUnombre').setValue(datos.nombre);
		        Ext.getCmp('txtPUapellido').setValue(datos.apellido);
		        Ext.getCmp('txtPUempresa').setValue(datos.empresa);
		        Ext.getCmp('txtPUtelefono').setValue(datos.telefono);
		        Ext.getCmp('txtPUemail').setValue(datos.email);
		        Ext.getCmp('txtPUciudad').setValue(datos.ciudad);
		        Ext.getCmp('txtPUdireccion').setValue(returncrlf(datos.direccion));
		        Ext.getCmp('txtPUusuario').setValue(datos.usuario);
		        
		        cmbPais = Ext.getCmp('cmbPUpais');
		        cmbPaisIndex = cmbPais.getStore().find('id',datos.id_pais);
		        cmbPaisRecordSelected = cmbPais.getStore().getAt(cmbPaisIndex);
		        cmbPais.setValue(cmbPaisRecordSelected.get('id'));
		        
		        estadoStore.getProxy().url = 'backend-cacei/index.php/direccion/generarComboEstados/' + Ext.getCmp('cmbPUpais').getValue();
	    		estadoStore.load(function(records, operation, success) {
	    			cmbEstado = Ext.getCmp('cmbPUestado');
	    			cmbEstadoIndex = estadoStore.find('id',datos.id_estado);
	    			cmbEstadoRecordSelected = estadoStore.getAt(cmbEstadoIndex);
	    			cmbEstado.setValue(cmbEstadoRecordSelected.get('id'));
	            });
	    		if (datos.imgchar1 != ""){
	    			Ext.getCmp('imgFotoVPC').setSrc(imgTemp + datos.imgchar1);
	    		}
	        }
	        else {
	        	Ext.Msg.alert("Error", datos.message);
	        }
        },
        failure: function() {
        	Ext.Msg.alert("Error", "Servidor no conectado");
        }
    });    
}


//Funcion que guarda el perfil de un cliente
function guardarPerfil(){
	 var formVPC = Ext.getCmp('frmPerfilCliente1').getForm();
	 if(formVPC.isValid() && frmVerificarPassword() == "1"){
	 	 var auxnameVPC = (document.getElementsByName('ufileVPC[]')[0].value).split('.'); //Obtener la extension de la imagen
  		 var extImgVPC = (auxnameVPC[auxnameVPC.length-1]);
  		
	     var loadingMaskVPC = new Ext.LoadMask(Ext.getBody(), { msg: "Guardando..." });
	     loadingMaskVPC.show();
	     formVPC.submit({
	     	 url: 'backend-cacei/index.php/cliente/guardarPerfilCliente',
	    	 params: {
	            nombre: 		Ext.getCmp('txtPUnombre').getValue(),
	            apellido: 		Ext.getCmp('txtPUapellido').getValue(), 
	            empresa:		Ext.getCmp('txtPUempresa').getValue(),
	            telefono: 		Ext.getCmp('txtPUtelefono').getValue(),
	            email:			Ext.getCmp('txtPUemail').getValue(),
	            direccion: 		return2br(Ext.getCmp('txtPUdireccion').getValue()),
	            estado:			Ext.getCmp('cmbPUestado').getValue(),
	            ciudad: 		Ext.getCmp('txtPUciudad').getValue(),
	            //sitio_web: 		Ext.getCmp('txtSitioWeb').getValue(),
	            usuario: 		Ext.getCmp('txtPUusuario').getValue(),
	            password: 		Ext.getCmp('txtPUpassword').getValue(),
	            imagen: 		extImgVPC,
	            ufile: 			document.getElementById('imgFotoVPC').src,
	            newpassword:	Ext.getCmp('txtPUnewpassword').getValue(),
	            confirmar:		Ext.getCmp('txtPUconfirmar').getValue()
	         },
	         success: function (form, action) {
	        	loadingMaskVPC.hide();
	        	Ext.getCmp('txtPUpassword').reset();
	        	Ext.getCmp('txtPUnewpassword').reset();
	        	Ext.getCmp('txtPUconfirmar').reset();
	            Ext.Msg.alert('Mensaje', action.result.message);
	         },
	         //No hay retorno de la pagina servidora
	         failure: function(f,a){
	             if (a.failureType === Ext.form.Action.CONNECT_FAILURE){
	                 Ext.Msg.alert('Error', 'El servidor reporta:'+a.response.status+' '+a.response.statusText);
	             }
	             if (a.failureType === Ext.form.Action.SERVER_INVALID){
	                Ext.Msg.alert('Advertencia', a.result.errormsg);
	             }
	         }
	     });
	 }
}

function frmVerificarPassword(){
	var bool="1";
	if (Ext.getCmp('txtPUpassword').getValue().length < 1 && Ext.getCmp('txtPUnewpassword').getValue().length < 1 && Ext.getCmp('txtPUconfirmar').getValue().length < 1)
		bool = "1"; 
	else{
		if (Ext.getCmp('txtPUpassword').getValue().length < 1){
			Ext.Msg.alert("Error", "Debe introducir el password actual");
			bool = "0";
		}
		else{
			if (!checkPasswordPU){
				Ext.Msg.alert("Error", "El nuevo password no es consistente");
				bool = "0";
			}
			else{
				if (Ext.getCmp('txtPUnewpassword').getValue().length > 0 && Ext.getCmp('txtPUnewpassword').getValue().length < 4){
					Ext.Msg.alert("Error", "El nuevo password debe tener mas de 4 caracteres");
					bool = "0";
				}
			}
		}
	}
	return bool;
}


function validarPasswordActual(){
	if (Ext.getCmp('txtPUpassword').getValue() != ""){
  	  Ext.Ajax.request({
	    	url: 'backend-cacei/index.php/usuario/validarPassword',
	     	//Enviando los parametros a la pagina servidora
	     	params: {
	      		usuario: Ext.getCmp('txtPUusuario').getValue(),
	      		password: Ext.getCmp('txtPUpassword').getValue()
	     	},
	     	//Retorno exitoso de la pagina servidora a traves del formato JSON
	     	success: function( result, request ) {
	      		datos=Ext.JSON.decode(result.responseText);
	      		if (datos.exito != 'true'){
	      			Ext.getCmp('txtPUpassword').reset();
	      			Ext.getCmp('txtPUpassword').focus();
	      			Ext.Msg.alert("Error", "Password actual incorrecto");
	      		}
	     	},
	     	//No hay retorno de la pagina servidora
	     	failure: function() {
	      		Ext.Msg.alert("Error", "Servidor no conectado, intente mas tarde");
	     	}
	      });
		}
}

Ext.onReady(function() {
	 ventanaPerfilCliente = Ext.create('ventanaPerfilCliente');
});